<template>
	<view class="body">
		<u-navbar :is-back="true" title="排名" title-size="33" :background="background" title-color="#2e2e2e"
			:border-bottom="false">
		</u-navbar>
		<image src="/static/stock/bg.png" mode="aspectFit" class="bg"></image>
		<view class="comlum_Y">
			<view class="sreen">
				<view class="first_lost">
					<view class="left">
						<view class="time_see_box" @click="timeShow = true">
							<view class="size">
								2025-04-06
							</view>
							<u-icon name="play-right-fill" color="#73F0EA" size="28" class="icon1"></u-icon>
						</view>
					</view>
					<view class="right_box">
						<image :src="openEye?$IMG_URL('/static/user/eye.png'):$IMG_URL('/static/user/eyeoff.png')"
							mode="" :class="openEye?'eye':'eyeoff'" @click="openEye = !openEye"></image>

						<u-icon name="question-circle" color="#dbdbdb" size="26" class="circle"></u-icon>
					</view>
				</view>
				<view class="class">
					<view class="title">
						排序方式
					</view>
					<view class="sort_right">
						<view v-for="(item,index) in Sort" :key="index" :class="sortIndex == index ?'activeBtn':'btn'"
							@click="sortIndex = index">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="sound_box">
				<view class="ml1">
					教练
				</view>
				<view class="ml2">
					售课
				</view>
				<view class="ml3">
					上课
				</view>
			</view>
			<scroll-view scroll-y="true" class="scrollView">
				<view class="comlum_nsc">
					<view v-for="(item,index) in coach_list" :key="index" class="Item">
						<view class="num_box">
							<image
								:src="index == 0 ?'/static/stock/one.png':index == 1 ?'/static/stock/two.png':'/static/stock/three.png'"
								mode="aspectFit" class="num_tag" v-if="index < 3"></image>
							<view class="num_tag2" v-else>
								{{index}}
							</view>
						</view>
						
						<view class="sort_box" v-if="item.sortType == 1">
							<image src="/static/stock/up.png" mode="aspectFit" class="tag-img"></image>
							<view class="size">
								{{item.sort}}
							</view>
						</view>
						<view class="sort_box" v-else-if="item.sortType == 2">
							<image src="/static/stock/down.png" mode="aspectFit" class="tag-img"></image>
							<view class="size">
								{{item.sort}}
							</view>
						</view>
						<view class="sort_box" v-else>
							<view class="gang">
								
							</view>
						</view>
						
						<!-- 用户头像 -->
						<image :src="item.img" mode="" class="avater"></image>
						<view class="first_comlun">
							<view class="name">
								{{item.name}}
							</view>
							<view class="phone">
								{{item.phone}}
							</view>
						</view>
						<view class="two_comlun mr1">
							<view class="price">
								￥18000.00
							</view>
							<view class="sizeh">
								30节 
							</view>
						</view>
						<view class="two_comlun">
							<view class="price">
								￥18000.00
							</view>
							<view class="sizeh">
								30节 
							</view>
						</view>
					</view>
					<view class="empty">
						
					</view>
				</view>
				<view class=" flexd">
					<view class="sort_box" v-if="query.sortType == 1">
						<image src="/static/stock/up.png" mode="aspectFit" class="tag-img"></image>
						<view class="size">
							{{query.sort}}
						</view>
					</view>
					<view class="sort_box" v-else-if="query.sortType == 2">
						<image src="/static/stock/down.png" mode="aspectFit" class="tag-img"></image>
						<view class="size">
							{{query.sort}}
						</view>
					</view>
					<view class="sort_box" v-else>
						<view class="gang">
							
						</view>
					</view>
					
					<!-- 用户头像 -->
					<image :src="query.img" mode="" class="avater"></image>
					<view class="first_comlun">
						<view class="name">
							{{query.name}}
						</view>
						<view class="phone">
							{{query.phone}}
						</view>
					</view>
					<view class="two_comlun mr1">
						<view class="price">
							￥18000.00
						</view>
						<view class="sizeh">
							30节 
						</view>
					</view>
					<view class="two_comlun">
						<view class="price">
							￥18000.00
						</view>
						<view class="sizeh">
							30节 
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<popupVue :couponShow="timeShow" @sure="timeSure" @close="timeclose" :title="'选择时间'" :height="'786rpx'"
			:flexHeight="'556rpx'" :btnShow="true">
			<view class="time_comlum">
				<view class="row_time">
					<view v-for="(item,index) in timeList" :key="index" class="item" @click="timeActiveIndex = index"
						:style="{border:timeActiveIndex == index ?'2rpx solid #73F0EA':'2rpx solid #f6f6f6'}">
						<view class="title" :style="{color:timeActiveIndex == index ?'#73F0EA':'#333333'}">
							{{item.name}}
						</view>
						<view class="size" :style="{color:timeActiveIndex == index ?'#73F0EA':'#333333'}">
							{{item.num}}
						</view>
					</view>
				</view>
				<view class="row_time_two">
					<view class="name">
						自定义
					</view>
					<input :class="timeActiveIndex == 'start'?'custom-input-active':'custom-input'" :style="customStyle"
						placeholder="起始时间" @click="handleInputClick('start')" disabled />
					<view class="gang">

					</view>
					<input :class="timeActiveIndex == 'end'?'custom-input-active':'custom-input'" class="custom-input"
						:style="customStyle" placeholder="终止时间" @click="handleInputClick('end')" disabled />
				</view>
			</view>
		</popupVue>
		<u-picker mode="time" v-model="calendarShow" :params="params" :customTimeTag="true"
			:title="timeActiveIndex == 'start' ?'选择起始时间':'选择终止时间'" :popupheight="'786rpx'" :borderRadius="16"
			@confirm="changeCalendar"></u-picker>
	</view>
</template>

<script>
	import popupVue from '@/components/popup.vue'
	export default {
		components: {
			popupVue
		},
		data() {
			return {
				background: {
					backgroundColor: '#73F0EA',
				},
				params: {
					year: true,
					month: true,
					day: true,
				},
				timeList: [{
						name: '今日',
						num: '2025-04-14'
					},
					{
						name: '昨日',
						num: '2025-04-13'
					}, {
						name: '本月',
						num: '2025-04-13'
					}, {
						name: '上月',
						num: '2025-04-13'
					},
				],
				timeActiveIndex: null,
				timeShow: false,
				calendarShow: false,
				openEye: false,
				Sort: [
					'售课金额',
					'课数',
					'上课金额',
					'节数'
				],
				sortIndex: null,
				query:{},
				coach_list: []

			}
		},
		methods: {
			handleInputClick(type) {
				// 清除列表项激活状态 
				this.timeActiveIndex = type
				this.calendarShow = true
				console.log('this.calendarShow', this.calendarShow);
			},
			timeSure() {
				this.timeShow = false
			},
			timeclose() {
				this.timeShow = false
			},
			changeCalendar(e) {
				console.log('e', e);
			},
		}
	}
</script>

<style lang="scss" >
	/* 隐藏系统默认滚动条 */
	::-webkit-scrollbar {
	  display: none;
	  width: 0;
	  height: 0;
	  color: transparent;
	}
	.eye {
		width: 36rpx;
		height: 22rpx;

	}

	.eyeoff {
		width: 34rpx;
		height: 14rpx;
	}

	.circle {
		margin-left: 30rpx;
	}

	.class {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		padding-top: 32rpx;
		height: 58rpx;

		.title {
			margin-right: 78rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: right;
			color: #333333;
		}

		.sort_right {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;

			.btn {
				padding: 12rpx 20rpx;
				background: #f6f6f6;
				border-radius: 12rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				color: #666666;
				display: flex;
				flex-direction: row;
				align-items: center;
				transition: all 0.3s ease;
			}

			.activeBtn {
				padding: 12rpx 20rpx;
				background: #73F0EA;
				border-radius: 12rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				color: #ffffff;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
		}

	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;

		.bg {
			width: 750rpx;
			height: 330rpx;
		}

		.comlum_Y {
			margin-top: -20rpx;
			width: 750rpx;
			height: 70vh;
			background: #ffffff;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;

			.scrollView {
				 height: calc(70vh - 200rpx); /* 根据实际元素高度调整 */
				width: 100%;
				overflow: hidden;
				-webkit-overflow-scrolling: touch;
				overflow-anchor: auto;
				
				.empty{
					width: 100%;
					height: 162rpx;
				}
				.flexd{
					width: 750rpx;
					height: 160rpx;
					position: fixed;
					bottom: 0;
					display: flex;
					justify-content: center;
					background: #f6f6f6!important;
					padding: 22rpx 28rpx 0 !important;
					box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166,179,194,0.30); 
				}
				.Item {
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 100%;
					height: 162rpx;
					padding: 26rpx 0 22rpx;
					border-bottom: 1rpx solid #e9e9e9;
					
				}
				.num_box{
					width: 52rpx;
					display: flex;
					justify-content: center;
					margin: 0 7.15rpx 0 4rpx;
				}
				.num_tag {
					width: 52rpx;
					height: 70rpx;
					
					
				}
								
				.num_tag2 {
					width: 48rpx;
					height: 48rpx;
					background: #f6f6f6;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-family: DIN, DIN-Bold;
					font-weight: 700;
					text-align: center;
					color: #000000;
				}
								
				.sort_box {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					width: 42rpx;
					padding: 0 8rpx 0 5.15rpx;
								
					.gang {
						width: 14rpx;
						height: 2rpx;
						background-color: rgb(186, 186, 186);
					}
								
					.tag-img {
						width: 14rpx;
						height: 16rpx;
					}
								
					.size {
						width: 14rpx;
						height: 28rpx;
						font-size: 24rpx;
						font-family: DIN, DIN-Bold;
						font-weight: 700;
						text-align: left;
						color: #f37364;
					}
				}
				.avater{
					width: 80rpx;
					height: 80rpx;
					background: rgba(0,0,0,0.00);
					border-radius: 50%;
					
				}
				.first_comlun{
					width: 176rpx;
					display: flex;
					flex-direction: column;
					padding-left: 12rpx;
					.name{
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Heavy;
						font-weight: 800;
						text-align: left;
						color: #000000;
						margin-bottom: 10rpx;
					}
					.phone{
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #666666;
					}
				}
				.mr1{
					margin-right: 40rpx;
				}
				.two_comlun{
					display: flex;
					flex-direction: column;
					.price{
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Heavy;
						font-weight: 800;
						text-align: left;
						color: #000000;
						margin-bottom: 6rpx;
					}
					.sizeh{
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #666666;
					}
				}
				.comlum_nsc {
					display: flex;
					flex-direction: column;
					width: 100%;
					padding: 0 32rpx;
					
					
				}
			}

			.sreen {
				width: 750rpx;
				height: 166rpx;
				border-radius: 32rpx;
				background: linear-gradient(180deg,
						rgba(129, 202, 197, 0.25),
						/* #73F0EA 叠加 opacity 后的等效值 */
						rgba(129, 202, 197, 0.145) 14%,
						/* 原 rgba 叠加 opacity 后的等效值 */
						rgba(255, 255, 255, 0));
				padding: 32rpx 32rpx 0;
				display: flex;
				flex-direction: column;

				.first_lost {
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 50rpx;
					width: 100%;

					.left {
						flex: 1;
						display: flex;
						flex-direction: row;
						align-items: center;
					}

					.time_see_box {

						height: 50rpx;
						display: flex;
						flex-direction: row;
						align-items: center;

						.size {
							margin-right: 16rpx;
							font-size: 36rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #333333;
						}
					}

					.right_box {
						display: flex;
						flex-direction: row;
						align-items: center;
					}
				}
			}

			.sound_box {
				margin-top: 41rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #999999;

				.ml1 {
					margin-left: 132rpx;
				}

				.ml2 {
					margin-left: 200rpx;
				}

				.ml3 {
					margin-left: 138rpx;
				}
			}


		}
	}


	.time_comlum {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;

		.row_time {
			width: 100%;
			padding: 0 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;

			.item {
				width: 160rpx;
				height: 108rpx;
				background: #f6f6f6;
				border-radius: 16rpx;
				border: 2rpx solid #f6f6f6;
				display: flex;
				align-items: center;
				flex-direction: column;

				.title {
					margin-top: 16rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: center;
					color: #333333;
				}

				.size {
					margin-top: 8rpx;
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: center;
					color: #333333;
				}
			}
		}

		.row_time_two {
			margin-top: 48rpx;
			width: 100%;
			padding: 0 40rpx 0 0;
			display: flex;
			flex-direction: row;
			align-items: center;

			.name {
				width: 164rpx;
				padding-left: 56rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #333333;
			}

			.gang {
				margin: 0 24rpx;
				width: 50rpx;
				height: 0rpx;
				border: 2rpx solid #000000;
			}
		}
	}

	.placeholder-style {
		color: #B6B6B6 !important;
		opacity: 0.8;
	}

	.custom-input {
		width: 224rpx;
		height: 82rpx;
		border: 2rpx solid #e9e9e9;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #333333;
		padding: 0 !important;
		/* 模拟uView边框 */
	}

	.custom-input-active {
		width: 224rpx;
		height: 82rpx;
		border: 2rpx solid #73F0EA;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #73F0EA;
		padding: 0 !important;
	}
</style>